<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>val()</h1>
    <p>val()只能获取第一个对象的值。</p>
    <p>val(参数)：设置文本框（下拉框）的值</p>
    <div>
        姓名：<input type="text" name="name" id="name"> <br>
        专业：
        <select name="major" id="major">
            <option value="1" selected>JAVA</option>
            <option value="2">WEB</option>
        </select> 
        <br>
        性别：
        男<input type="radio" name="sex" value="1" checked>
        女<input type="radio" name="sex" value="2">
        <br>
        爱好：
        足球<input type="checkbox" name="hobby" value="1">
        读书<input type="checkbox" name="hobby" value="2">
        音乐<input type="checkbox" name="hobby" value="3">
        <button onclick="handleClick()">确认</button>
    </div>
    <script src="../jquery-3.6.0.min.js"></script>
    <script>
        function handleClick() {
            let obj = {};
            obj.name = $("#name").val();
            obj.major = $("#major").val();
            obj.sex = $("[name='sex']:checked").val();
            // jquery对象遍历出来的是DOM对象
            obj.hobby = Array.from($("[name='hobby']:checked")).map(v => v.value);
            // let hobby = document.querySelectorAll("[name='hobby']:checked");

            console.log(obj);
        }
    </script>
</body>
</html>